// 第三方库

import { useEffect, useState } from 'react';
import { useHistory } from 'react-router-dom';

// 样式

export const NotFound = () => {
  const history = useHistory();
  // 页面倒计时状态
  const [count, setCount] = useState(3);

  // 倒计时
  useEffect(() => {
    // 倒计时终止条件
    if (count === -1) {
      // 跳转到首页
      history.push('/home');
      return;
    }
    console.log('================================================');
    // 倒计时
    const timerId = setInterval(() => {
      setCount(count - 1);
    }, 1000);
    return () => {
      console.log('qingli', timerId);
      clearInterval(timerId);
    };
  });

  return (
    <div
      style={{
        // height: '100vh',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
      }}
    >
      <h2>迷路啦，5秒后返回首页</h2>
      <h1>{count}</h1>
    </div>
  );
};
